<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例复习</title>
	</head>
	<body>
		<div id="app" align="center">
			<h1>新增</h1>
			<div>
				姓名：<input type="text" v-model="addUser.name"/>
				年龄：<input type="text" v-model="addUser.age"/>
				性别：<input type="text" v-model="addUser.sex"/>
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />
			<div>
				<h1>修改</h1>
				<!-- disabled :禁止修改-->
				ID:	  <input type="text" v-model="updateUser.id" disabled="disabled"/>
				姓名：<input type="text" v-model="updateUser.name"/>
				年龄：<input type="text" v-model="updateUser.age"/>
				性别：<input type="text" v-model="updateUser.sex"/>
				<button @click="updateUserBtn">修改</button>
			</div>
			<table border="1px" width="80%" align="center">
				<tr align="center" height="60px">
					<th colspan="5">
						<h1 style="color: blue">用户列表</h1>
					</th>
				</tr>
				<tr align="center" height="60px">
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr align="center" v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
					<td>
						<button @click="toUpdate(user)">修改</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
				</tr>
				
				
			</table>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
			
		<script>
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el:'#app',
				data:{
					userList:[],
					addUser:{
						name:'',
						age:'',
						sex:''
					},
					updateUser:{
						id:'',
						name:'',
						age:'',
						sex:''
					}
						
				},
				methods:{
						
					async getUserList(){
						let {data: result} = await axios.get("/findAll")
						this.userList = result
							
					},
					async deleteUserById(id){
						//“${id}”该形式为模板字符串写法，必须要用反引号
						let {data: result} = await axios.delete(`/user/${id}`)
						console.log(result)
						this.getUserList()
						
					},
					async addUserBtn(){
						let {data: result} = await axios.post("/saveUser",this.addUser)
						console.log(result)
						this.getUserList()
						this.addUser = {}
					},
					toUpdate(user){
						this.updateUser = user	
					},
					async updateUserBtn(){
						let {data: result} = await axios.put("/updateUser",this.updateUser)
						console.log(result)
						this.getUserList()
						this.updateUser = {}
					}		
				},
				created(){
						
					this.getUserList()
				}	
			})

				
		</script>
		
	</body>
</html>
